<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>12.避免使用内联样式属性以提升组件性能</title>
</head>

<body>
    <div>
        <h1>避免使用内联样式属性</h1>
        <p>当使用内联 style 为元素添加样式时，内联 style 会被编译为 javaScript 代码将样式规则映射到元素身上，浏览器就会花费更多的事件执行脚本和渲染 UI，从而增加了组件的渲染事件</p>
        <p>为元素附加了内联样式，添加的内联样式为 JavaScript对象，需要被转换为等效的 CSS样式规则，然后将其应用到元素，这样涉及到脚步的执行</p>
        <p>更好的办法是将 CSS 文件导入样式组件，能通过 CSS 直接做的事情就不要通过 javaScript 去做，因为 JavaScript操作 DOM 非常慢</p>
    </div>
</body>

</html>